<template>
  <Panel title="行驶量" class="flow-drive" v-bind="$attrs">
    <div class="flow-progress">
      <Progress :progress="highwayDrive" :number="highwayTotal" color="B" title="公路" class="drive-accounted">
      </Progress>
      <SequentialSame :data="highwaySameData" class="flow-sequential-same"></SequentialSame>
    </div>
    <div class="flow-progress">
      <Progress :progress="highSpeedDrive" :number="highSpeedTotal" color="G" title="高速" class="drive-accounted">
      </Progress>
      <SequentialSame :data="highSpeedSameData" class="flow-sequential-same"> </SequentialSame>
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'FlowDrive'
}
</script>
<script setup>
/**
 * @desc 行驶量(二级)
 * @auther 阳坤
 * @date 2022/10/21
 *
 **/

import Progress from '../../components/progress/index.vue'
import SequentialSame from '../../components/sequential-same/index.vue'
import Panel from '../../components/panel'
import flowApi from '../../api/flow.js'
import { ref, onMounted } from 'vue'

// 行驶量进度  公路
const highwayDrive = ref(0)
const highwayTotal = ref(0)

// 行驶量进度 高速
const highSpeedDrive = ref(0)
const highSpeedTotal = ref(0)

// 公路同环比
const highwaySameData = ref({})
// 高速同环比
const highSpeedSameData = ref({})

onMounted(() => {
  init()
})

/**
 * 初始化
 */
const init = () => {
  getData()
}

/**
 * 获取数据
 */
const getData = () => {
  const params = {
    province: '32',
    city: '',
    roadType: 2
  }
  flowApi
    .getDriveStatistic(params)
    .then(res => {
      if (res.data) {
        // 占比
        highwayDrive.value = (res.data.glVolume / (res.data.glVolume + res.data.gsVolume)) * 100
        highSpeedDrive.value = (res.data.gsVolume / (res.data.glVolume + res.data.gsVolume)) * 100
        // 行驶总量
        highwayTotal.value = res.data.glVolume
        highSpeedTotal.value = res.data.gsVolume
        // 公路同环比
        highwaySameData.value = {
          ring: res.data.glVolumeHb,
          same: res.data.glVolumeTb
        }
        // 高速同环比
        highSpeedSameData.value = {
          ring: res.data.gsVolumeHb,
          same: res.data.gsVolumeTb
        }
      }
    })
    .catch(() => {})
}
</script>

<style scoped lang="less">
.flow-drive {
  :deep(.mz-panel-content-main) {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.15rem 0.2rem;

    .flow-progress {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      // height: 12%;
      justify-content: space-between;

      .drive-accounted {
        height: 0.16rem;
        margin-bottom: 0.1rem;
      }

      .flow-sequential-same {
        width: 100%;
        justify-content: flex-end;
        // padding-right: 10px;

        .sequential {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
